<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>产品列表</title>

<!-- 用于转跳之后的路径恢复 -->
<%
	String path = request.getRequestURI();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<base href="<%=basePath%>">

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="style/adminStyle.css" rel="stylesheet" type="text/css" />
	<link href="style/shangp.css" rel="stylesheet" type="text/css" />
	<script src="js/jquery-3.1.0.js"></script>
	<script src="js/public.js"></script>
	
	<style type="text/css"> 
@-webkit-keyframes fontbulger { 
0% { 
font-size: 10px; 
} 
30% { 
font-size: 15px; 
} 
100% { 
font-size: 12px; 
} 
} 


#box { 
-webkit-animation-name:  fontbulger; 
-webkit-animation-duration: 1s; 
-webkit-animation-iteration-count:3; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: ease-out; 
-webkit-animation-fill-mode: both; 
-webkit-animation-delay: 2s; 
} 
</style>
</head>
<body>
	<div class="wrap">
		<div class="page-title">
			<span class="modular fl"><i></i><em>商品列表</em></span> 
		</div>

		<!-- 搜索框 -->
		<div class="operate">
			<form action="../GoodsServlet?op=search" method="post">
				<input type="text" class="textBox length-long" placeholder="输入产品名称..." name="search"/> 
				<input type="submit" value="查询" class="tdBtn" />
			</form>
		</div>

		<table class="list-style Interlaced">
			<tr>
				<th>ID编号</th>
				<th>产品</th>
				<th>名称</th>
				<th>标配价</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<c:if test="${goodsList!=null }">
			<!-- 产品信息 -->
			<c:forEach items="${goodsList }" var="list1">

				<tr>
					<td class="center" >
					<c:if test="${list1.goodStata=='新商品'}">
					<div class="blink" style="position: relative;top:-30px;left: -50px;"><b>Newジ</b></div>		
					</c:if>
					
					<span>  <i> ${list1.goodId} </i>
					</span>
					</td>

					<td class="center pic-area">
						<!-- 循环查找图片 --> 
						<c:forEach items="${photoList }" var="list2">
							<!-- 判断是否为此商品的图片 -->
							<c:if test="${list1.goodId==list2.goodId}">
								<img src="${list2.way }" class="thumbnail" />
								<c:set var="way" value="${list2.way }"></c:set>
								<c:set value="${list2.photoId }" var="imgParId"></c:set>
							</c:if>
						</c:forEach>
					</td>
					<td class="td-name center"><span class="ellipsis td-name block"><em>
							${list1.goodName }</em></span></td>
					<td class="center"><span> <i>￥</i> <em>
								${list1.goodPrice }</em>
					</span></td>
					<td class="center"><span> <em> ${list1.goodStata }</em>
					</span></td>
					<td class="center">
						<a title="查看详细信息" class="inline-block" href="../GoodsServlet?op=GoodsDetail&Id=${list1.goodId }" > 
							<img src="images/icon_view.gif" />
						</a> 
						
					</td>
				</tr>


			</c:forEach>
			</c:if>
			<c:if test="${goodsList==null }">
				<tr>
					<td class="td-name">
						<span class="ellipsis td-name block">
							未找到任何有关产品！
						</span>
					</td>
				</tr>
			</c:if>

		</table>
		<!-- BatchOperation -->
		<div style="overflow: hidden;">
			<!-- Operation -->
			<div class="BatchOperation fl">
				<input type="checkbox" id="del" /> <label for="del"
					class="btnStyle middle">全选</label> <input type="button"
					value="批量删除" class="btnStyle" />
			</div>
			<!-- turn page -->
			<div class="turnPage center fr">
				<a>第一页</a> <a>1</a> <a>最后一页</a>
			</div>
		</div>
	</div>

<script language="javascript"> //这一组<script......./script>是java程序，后台运行的
function changeColor()//这里{.......}花括号定义了一个名叫changeColor变色的函数
{
var color="yellow|green|blue|gray|red"; //在内存变量color里定义5种颜色
color=color.split("|"); //定义数组5个元素分别放置5种颜色
//下面这一行是把名★叫blink的对象★的color属性随机改成5种颜色的一种
$(".blink").css("color",color[parseInt(Math.random() * color.length)]);
}
setInterval("changeColor()",200); //●设置一个定时器，每200毫秒调用一次变色函数
</script>


	<!-- 详细信息 -->
	<%-- <div class="cd-popup3">
		<div class="cd-popup-container3">
			<br />
			<p>详细信息</p>
			<div class="cd-buttons">
				<table id="xiangxi">
					<tr>
						<td>名称:</td>
						<td>${list1.goodName }</td>
					</tr>
					<tr>
						<td>标配价:</td>
						<td>${list1.goodPrice }</td>
					</tr>
					<tr>
						<td>状态:</td>
						<td>${list1.goodStata }</td>
					</tr>
					<tr>
						<td>产品描述:</td>
						<td>${list1.goodIntroduce}</td>
					</tr>
				</table>
			</div>
			<a href="#0" class="cd-popup-close">X</a>
		</div>
	</div> --%>

	<script type="text/javascript">
		$(function() {
			$(".xiajia").click(function() {
				event.returnValue = confirm("你确认要下架吗？");
			});

			$(".shangjia").click(function() {
				event.returnValue = confirm("你确认要上架吗？");
			});
			$(".shanchu").click(function() {
				event.returnValue = confirm("你确认要删除吗？");
			});
		});
	</script>
<%-- <%
    String mess=(String)request.getAttribute("message");
    if("".equals(mess)  || mess==null){
         
    }
 
 else{%>
    <script type="text/javascript">
        alert("<%=mess%>");
</script>
 
    
<% }%> --%>

	<script type="text/javascript">
		/*弹框JS内容*/
		jQuery(document).ready(
				function($) {

					//打开窗口
					$('.cd-popup-trigger3').on('click', function(event) {
						event.preventDefault();
						$('.cd-popup3').addClass('is-visible3');
						//$(".dialog-addquxiao").hide()
					});
					//关闭窗口
					$('.cd-popup3').on(
							'click',
							function(event) {
								if ($(event.target).is('.cd-popup-close')
										|| $(event.target).is('.cd-popup3')) {
									event.preventDefault();
									$(this).removeClass('is-visible3');
								}
							});
					//ESC关闭
					$(document).keyup(function(event) {
						if (event.which == '27') {
							$('.cd-popup3').removeClass('is-visible3');
						}
					});
				});
	</script>
</body>
</html>